
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>全国疫情发生情况统计可视化</title>
    <link rel="stylesheet" type="text/css" href="css/index_style.css"/>
<%--    <script src="js/jquery.min.js"></script>--%>
<%--    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>--%>
<%--    <script src="js/echarts.min.js"></script>--%>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

<!-- 页面头部区域 -->
<div id="head_content">
    <div class="head_logo">
        <img src="img/baidu_logo.png" height="25"/>
    </div>
    <div class="sub_title">
        新型冠状病毒肺炎
    </div>
    <div class="title">
        <h1>疫情实时大数据报告</h1>
    </div>
    <div class="readnum">
        共 8,173,099,278 人次已浏览
    </div>
</div>

<!-- 页面主体区域 -->
<div id="body_content">
    <!-- lab页 -->
    <div id="yiqing_lab">
        <div id="yiqing_in">
            <span  class="active">国内疫情</span>
        </div>
        <div id="yinqing_out">
            <span>国外疫情</span>
        </div>
    </div>

    <!-- 国内疫情数据展示 -->
    <div id="yiqing_data_block">
        <div class="title">
            <h4>国内疫情</h4>
            <span>数据更新至 2020.11.26 14:26</span>
        </div>
        <div id="box" class="content">
            <div class="info_block">
                <span class="lab">登记人数</span>
                <span class="current_num">{{TotalPeople}}</span>
                <span class="yestoday_num">昨日<span class="data">+66</span></span>
            </div>
            <div class="info_block">
                <span class="lab">累计确诊</span>
                <span class="current_num">{{Confirmed}}</span>
                <span class="yestoday_num">昨日<span class="data">+66</span></span>
            </div>
            <div class="info_block">
                <span class="lab">无症状</span>
                <span class="current_num">{{Asymptomatic}}</span>
                <span class="yestoday_num">昨日<span class="data">+66</span></span>
            </div>
            <div class="info_block">
                <span class="lab">有症状</span>
                <span class="current_num">{{SymptomaticP}}</span>
                <span class="yestoday_num">昨日<span class="data">+66</span></span>
            </div>
            <div class="info_block">
                <span class="lab">疑似病例</span>
                <span class="current_num">{{Suspected}}</span>
                <span class="yestoday_num">昨日<span class="data">+66</span></span>
            </div>
            <div class="info_block">
                <span class="lab">已治愈</span>
                <span class="current_num">{{Cure}}</span>
                <span class="yestoday_num">昨日<span class="data">+66</span></span>
            </div>
            <div class="info_block">
                <span class="lab">重症病例</span>
                <span class="current_num">{{Severe}}</span>
                <span class="yestoday_num">昨日<span class="data">+66</span></span>
            </div>
            <div class="info_block">
                <span class="lab">死亡病例</span>
                <span class="current_num">{{Deaths}}</span>
                <span class="yestoday_num">昨日<span class="data">+66</span></span>
            </div>
        </div>
    </div>

    <!-- 地图区域 -->
    <div id="map_block">
        <!-- lab切换区 -->
        <div class="title">
            <div id="lab_left" class="lab_left active">
                现有确诊
            </div>
            <div id="lab_right" class="lab_right">
                累计确诊
            </div>
        </div>
        <!-- 地图区域 -->
        <div id="main" class="content">

            <script>
                $.ajax({
                    type: "get",
                    url: "http://localhost:8080/province/getAllProvince",
                    success: function(_data) {
                        // 基于准备好的dom，初始化echarts实例
                                // 3、基于准备好的dom，初始化echarts实例
                        var myChart = echarts.init(document.getElementById('main'));
                        myChart.showLoading();
                        $.get('json/china.json', function (geoJson) {
                            myChart.hideLoading();
                            echarts.registerMap('HK', geoJson);
                            myChart.setOption(
                                (option = {
                                    title: {
                                        text: 'Population Density of Hong Kong （2011）',
                                        subtext: 'Data from Wikipedia',
                                        sublink:
                                            'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12'
                                    },
                                    tooltip: {
                                        trigger: 'item',
                                        formatter: '{b}<br/>{c} (p / km2)'
                                    },
                                    toolbox: {
                                        show: true,
                                        orient: 'vertical',
                                        left: 'right',
                                        top: 'center',
                                        feature: {
                                            dataView: { readOnly: false },
                                            restore: {},
                                            saveAsImage: {}
                                        }
                                    },
                                    visualMap: {
                                        min: 800,
                                        max: 50000,
                                        text: ['High', 'Low'],
                                        realtime: false,
                                        calculable: true,
                                        inRange: {
                                            color: ['green', 'yellow', 'red']
                                        }
                                    },
                                    series: [
                                        {
                                            name: '香港18区人口密度',
                                            type: 'map',
                                            map: 'HK',
                                            label: {
                                                show: true
                                            },
                                            data:_data.map(v=>({name: v.province, value: v.total}))
                                            // 地图数据展示
                                            // data: [
                                            //     { name: '广东省', value: 20057.34 },
                                            //     { name: '广西壮族自治区', value: 15477.48 }
                                            // ]
                                        }
                                    ]
                                })
                            );
                        });
                    }
                });

            </script>
        </div>
    </div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="js/vue.js"></script>


<script>
    /* VUE部分 */
    var app = new Vue({
        el:"#box",
        data:{
            TotalPeople:15,
            Confirmed:10,
            Asymptomatic:20,
            SymptomaticP:25,
            Suspected:13,
            Cure:100,
            Severe:3,
            Deaths:1
        },
        mounted:function () {/*在页面加载完成之后立马执行的函数*/
            /*1 获取累计确诊人数，传递到leijiquezheng属性中就可以了*/
            var that = this;
            //获取获取登记总人数
            $.ajax({
                type: "get",
                url: "http://localhost:8080/province/getTotalPeople",
                success: function(_data){
                    that.TotalPeople = _data;
                }
            });
            //获取确诊人数
            $.ajax({
                type: "get",
                url: "http://localhost:8080/province/getConfirmed",
                success: function(_data){
                    that.Confirmed = _data;
                }
            });

           // 获取无症状人数
            $.ajax({
                type: "get",
                url: "http://localhost:8080/province/getAsymptomatic",
                success: function(_data){
                    that.Asymptomatic = _data;
                }
            });
            //获取有症状人数
            $.ajax({
                type: "get",
                url: "http://localhost:8080/province/getSymptomatic",
                success: function(_data){
                    that.SymptomaticP = _data;
                }
            });
            // 获取疑似病例
            $.ajax({
                type: "get",
                url: "http://localhost:8080/province/getSuspected",
                success: function(_data){
                    that.Suspected = _data;
                }
            });
            // 获取治愈病例
            $.ajax({
                type: "get",
                url: "http://localhost:8080/province/getCure",
                success: function(_data){
                    that.Cure = _data;
                }
            });
            // 获取重症病例
            $.ajax({
                type: "get",
                url: "http://localhost:8080/province/getSevere",
                success: function(_data){
                    that.Severe = _data;
                }
            });
            // 获取死亡病例
            $.ajax({
                type: "get",
                url: "http://localhost:8080/province/getDeaths",
                success: function(_data){
                    that.Deaths = _data;
                }
            });

        }
    });
</script>
<script type="text/javascript" src="js/index_js.js"></script>

</body>
</html>

